<template>
	<div>
		<div v-if="userData.user.role === '老师'" class="main-container">
			<div class="content">
				<div class="data-section">

					<el-space wrap style="font-size:30px">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<DataLine />
										</el-icon> 应到统计</span>
								</div>
							</template>
							<div class="attend">{{attendall}} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<SuccessFilled />
										</el-icon> 实到统计</span>
								</div>
							</template>
							<div class="attend">{{ userattend.count }} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<PieChart />
										</el-icon> 出勤率</span>
								</div>
							</template>
							<div class="attend">{{ (userattend.count / attendall * 100).toFixed(1) }} %</div>
						</el-card>
					</el-space>

					<el-select v-model="selectedValue" placeholder="请选择学生" size="large" style="width: 240px"
						@change="big">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>

					<div class="attend">
						<el-table :data="userallattend.checkDatas" height="520" style="width: 100%;">
							<el-table-column prop="check_in" label="签到时间" />
							<el-table-column prop="check_out" label="离开时间" />
							<el-table-column label="上课时间">
								<template #default="scope">
									{{ calculateTimeDifference(scope.row.check_in, scope.row.check_out) }}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>

				<div id="echartsDom"></div>

				<div class="attendance-box-1">
					<div class="attendance-status" :class="attendanceRate > 0.75 ? 'excellent' : 'needs-improvement'">
						{{ userattend.username }} 同学应到 {{attendall}} 次，实到 {{ userattend.count }} 次 -- {{ attendanceStatus }}
					</div>
				</div>
			</div>
		</div>

		<div v-if="userData.user.role === '学生'" class="main-container">
			<div class="content">
				<div class="data-section">
					<el-space style="font-size:30px">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<DataLine />
										</el-icon>应到统计</span>
								</div>
							</template>
							<div class="attend">{{attendall}} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<SuccessFilled />
										</el-icon>实到统计</span>
								</div>
							</template>
							<div class="attend">{{ userattend.count }} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<PieChart />
										</el-icon>出勤率</span>
								</div>
							</template>
							<div class="attend">{{ (userattend.count / attendall * 100).toFixed(1) }} %</div>
						</el-card>
					</el-space>

					<div class="attend">
						<el-table :data="userallattend.checkDatas" height="540" style="width: 100%">
							<el-table-column prop="check_in" label="签到时间" />
							<el-table-column prop="check_out" label="离开时间" />
							<el-table-column label="上课时间">
								<template #default="scope">
									{{ calculateTimeDifference(scope.row.check_in, scope.row.check_out) }}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>

				<div id="echartsDom"></div>
				
				
				<div class="attendance-box">
					<div class="attendance-status" :class="attendanceRate > 0.75 ? 'excellent' : 'needs-improvement'">
						 {{ userattend.username }} 同学应到 {{attendall}} 次，实到 {{ userattend.count }} 次 -- {{ attendanceStatus }}
					</div>
				</div>
				
			</div>
		</div>
		<div v-if="userData.user.role === '家长'" class="main-container">
			<div class="content">
				<div class="data-section">
					<el-space style="font-size:30px">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<DataLine />
										</el-icon>应到统计</span>
								</div>
							</template>
							<div class="attend">{{attendall}} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<SuccessFilled />
										</el-icon>实到统计</span>
								</div>
							</template>
							<div class="attend">{{ userattend.count }} 次</div>
						</el-card>
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									<span><el-icon>
											<PieChart />
										</el-icon>出勤率</span>
								</div>
							</template>
							<div class="attend">{{ (userattend.count / attendall * 100).toFixed(1) }} %</div>
						</el-card>
					</el-space>
		
					<div class="attend">
						<el-table :data="userallattend.checkDatas" height="540" style="width: 100%">
							<el-table-column prop="check_in" label="签到时间" />
							<el-table-column prop="check_out" label="离开时间" />
							<el-table-column label="上课时间">
								<template #default="scope">
									{{ calculateTimeDifference(scope.row.check_in, scope.row.check_out) }}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
		
				<div id="echartsDom"></div>
				
				
				<div class="attendance-box">
					<div class="attendance-status" :class="attendanceRate > 0.75 ? 'excellent' : 'needs-improvement'">
						 {{ userattend.username }} 同学应到 {{attendall}} 次，实到 {{ userattend.count }} 次 -- {{ attendanceStatus }}
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		getattendancebyid,
		getallattendancebyid,
		getuserbyrole
	} from '@/api/getData.js'
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		getStorage
	} from "@/utils/localStorage.js"
	import * as echarts from 'echarts';

	let userData = JSON.parse(getStorage("userInfo"));
	let id = userData.user.userId;
	const selectedValue = ref('');
const attendall=12;
if(userData.user.role==="家长"){
	id++
}
	const roledata = reactive({
		role: '学生'
	});

	const options = reactive([{
			value: 'stdname2',
			label: 'stdname'
		},
		{
			value: 'stdname1',
			label: 'stdname'
		},
		{
			value: 'stdname3',
			label: 'stdname'
		}
	]);

	const userattend = reactive({
		count: {},
		username: {},
	});

	const userallattend = reactive({
		checkDatas: []
	});

	const getallattendance = (id) => {
		getallattendancebyid(id).then(res => {
			console.log(res);
			userallattend.checkDatas = res.datas;
		});
	};

	const getallattendance1 = (selectedValue) => {
		getallattendancebyid(selectedValue).then(res => {
			console.log(res);
			userallattend.checkDatas = res.datas;
		});
	};

	const getattdenance1 = (selectedValue) => {
		getattendancebyid(selectedValue).then(res => {
			console.log(res);
			userattend.count = res.datas[0].count;
			userattend.username = res.datas[0].username;
			calculateAttendanceStatus(); // 计算考勤状态
		});
	};

	const calculateAttendanceStatus = () => {
		attendanceRate.value = userattend.count / 12;
		if (attendanceRate.value > 0.75) {
			attendanceStatus.value = '表现优秀';
		} else {
			attendanceStatus.value = '待改进';
		}
	};

	const big = (selectedValue) => {
		getattdenance1(selectedValue);
		getallattendance1(selectedValue);
		render(selectedValue);
	};

	const getusername = async () => {
		getuserbyrole(roledata).then(res => {
			console.log(res);
			res.datas.forEach((data, index) => {
				options[index].value = res.datas[index].user_id;
				options[index].label = res.datas[index].username;

				console.log(res.datas[index].user_id);
				console.log("----------------");
			});
		});
	};

	const getattdenance = (id) => {
		getattendancebyid(id).then(res => {
			console.log(res);
			userattend.count = res.datas[0].count;
			userattend.username = res.datas[0].username;
			calculateAttendanceStatus(); // 计算考勤状态
		});
	};

	const render = async (id) => {
		getattendancebyid(id).then(res => {

			option.series[0].data[0].value = 12 - res.datas[0].count;
			option.series[0].data[1].value = res.datas[0].count;

			let Mychart = echarts.init(document.getElementById('echartsDom'));
			Mychart.setOption(option);
		});
	};



	const option = reactive({
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'vertical',
			left: 'left'
		},
		series: [{
			name: 'Access From',
			type: 'pie',
			radius: '50%',
			data: [{
					value: 1,
					name: '缺勤次数'
				},
				{
					value: 5,
					name: "打卡次数"
				},
			],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	});

	const calculateTimeDifference = (checkIn, checkOut) => {
		const checkInDate = new Date(checkIn);
		const checkOutDate = new Date(checkOut);
		const timeDifference = checkOutDate - checkInDate;

		const totalMinutes = Math.floor(timeDifference / (1000 * 60));
		const hours = Math.floor(totalMinutes / 60);
		const minutes = totalMinutes % 60;

		return `${hours}小时 ${minutes}分钟`; // 以小时和分钟形式返回
	};


	const attendanceRate = ref(0);
	const attendanceStatus = ref('');

	onMounted(async () => {
		getallattendance(id);
		getattdenance(id);
		await getusername();
		console.log("id:" + id);
		await render(id);
		calculateAttendanceStatus(); // 计算考勤状态
	});
</script>

<style scoped>
	.attendance-box-1{
		position: absolute;
		bottom: 60px;
		right: 20px;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);	
		border-radius: 10px;
		width: 580px;
		height: 320px;
	}
	
	.attendance-box{
		position: absolute;
		bottom: 100px;
		right: 20px;
		background-color: white;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);	
		border-radius: 10px;
		width: 580px;
		height: 300px;
	}
	
	.attendance-status {
		padding: 10px;
		width:100%;
		height:100%;
		border-radius: 8px;
		font-size: 23px;
		color: white;
	}

	.excellent {
		background-color: green;
	}

	.needs-improvement {
		background-color: red;
	}

	.main-container {

		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 20px;
		background-color: #f5f5f5;
		height: 850px;
	}

	.content {
		display: flex;
		width: 100%;

	}

	.data-section {
		flex: 1;
		margin-right: 20px;
	}

	.el-select {
		margin-bottom: 20px;
	}

	.el-space {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.box-card {
		text-align: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background-color: #ffffff;
		font-size: 30px;
		margin-bottom: 0px;
		margin-right: 0;
		width: 330px;
	}

	.box-card .card-header {
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.attend {
		font-size: 30px;
		/* margin-top: 10px; */
	}

	.el-table {
		background: white;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		font-size: 17px;
	}

	.el-table th,
	.el-table td {
		text-align: center;
	}

	#echartsDom {
		width: 35%;
		height: 400px;
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	@media (max-width: 1200px) {
		.main-container {
			flex-direction: column;
			align-items: center;
		}

		.content {
			flex-direction: column;
			align-items: center;
		}

		#echartsDom {
			width: 100%;
			height: 300px;
			margin-top: 20px;
		}

	}
</style>